﻿@page
@{ Layout = "_Layout"; }

<div style="height: 10px"></div>

<el-form v-on:submit.native.prevent :inline="true" size="mini">
  <el-form-item label="栏目">
    <el-cascader
      v-model="channelIds"
      :options="channels"
      :props="{ checkStrictly: true }"
      v-on:change="handleChannelChange"
      placeholder="请选择栏目">
    </el-cascader>
    <span class="tips">下级栏目的字段默认继承上级栏目的字段，设置字段时请先选择合适的栏目</span>
  </el-form-item>
</el-form>

<el-table :data="styles" style="width: 100%">
  <el-table-column label="排序" prop="taxis" width="60">
    <template slot-scope="scope">
      {{ scope.row.taxis ? scope.row.taxis : '' }}
    </template>
  </el-table-column>
  <el-table-column label="字段名" prop="attributeName"></el-table-column>
  <el-table-column label="显示名称" prop="displayName"></el-table-column>
  <el-table-column label="提交类型" width="120">
    <template slot-scope="scope">
      {{ getInputType(scope.row.inputType) }}
    </template>
  </el-table-column>
  <el-table-column label="验证规则">
    <template slot-scope="scope">
      <el-link
        :underline="false"
        v-on:click="btnValidateClick(scope.row.attributeName)"
        type="primary">
        {{ getRules(scope.row.rules) }}
      </el-link>
    </template>
  </el-table-column>
  <el-table-column label="操作" width="130">
    <template slot-scope="scope">
      <el-link
        :underline="false"
        v-on:click="btnEditClick(scope.row.attributeName)"
        type="primary">
        编辑
      </el-link>
      <el-link
        :underline="false"
        v-if="!scope.row.isSystem"
        type="danger"
        v-on:click="btnDeleteClick(scope.row.attributeName)">
        删除
      </el-link>
    </template>
  </el-table-column>
</el-table>

<div style="height: 10px"></div>
<el-divider></el-divider>
<div style="height: 10px"></div>

<el-button size="small" type="primary" plain style="margin-left: 0px;" icon="el-icon-plus" v-on:click="btnAddClick">
  新增字段
</el-button>
<el-button size="small" type="primary" plain style="margin-left: 0px;" icon="el-icon-folder-add" v-on:click="btnAddMultipleClick">
  批量新增字段
</el-button>
<el-button size="small" type="primary" plain style="margin-left: 0px;" icon="el-icon-upload" v-on:click="btnImportClick">
  导 入
</el-button>
<el-button size="small" type="primary" plain style="margin-left: 0px;" icon="el-icon-download" v-on:click="btnExportClick">
  导 出
</el-button>

<el-drawer
  title="导入样式"
  ref="uploadPanel"
  :visible.sync="uploadPanel"
  destroy-on-close
  direction="rtl"
  size="50%">
  <div class="drawer__content">
    <br />
    <el-form v-on:submit.native.prevent ref="uploadForm" label-width="200px">
      <el-upload
        :drag="true"
        :limit="1"
        :action="urlUpload"
        :auto-upload="true"
        :headers="{Authorization: 'Bearer ' + $token}"
        :file-list="uploadList"
        :before-upload="uploadBefore"
        :on-progress="uploadProgress"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :multiple="false">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或 <em>点击上传</em></div>
      </el-upload>
    </el-form>
  </div>
</el-drawer>

@section Scripts{
<script src="/sitefiles/assets/js/admin/cms/settingsStyleChannel.js" type="text/javascript"></script> }